<template>
	<view class="">
		<view class="title">
			<image :src="product.image" mode=""></image>
			<view class="info">
				<view class="">{{product.store_name}}</view>
				<view class="desc">{{product.store_info}}</view>
			</view>
		</view>
		<view class="listbg" v-if="productAttrkey.length">
			<view class="item">
				<view class="" v-for="attrKey in productAttrkey" style="float:left;width: 50% !important;">{{attrKey}}
				</view>
				<view class="" style="float:left;width: 50% !important;">售价</view>
			</view>
			<view class="item" v-for="attrValue in product.attrValue ">
				<view class="" v-for="attrKey in productAttrkey" style="float:left;width: 50% !important;">
					{{attrValue.detail[attrKey]}}
				</view>
				<view class="" style="float:left;width: 50% !important;">
					<view class="" style="float:left;width: 50% !important;">
						<input type="digit" v-model='attrValue.price' @change="updateProductAttrValue(attrValue)"
							placeholder='请输入售价'>
					</view>
				</view>
			</view>
		</view>
		<view class="listbg" v-else>
			<view class="item">
				<view class="" style="width: 100% !important">单规格</view>
			</view>
			<view class="item">
				<view class="" style="width: 100% !important">
					<view class="" style="width: 100% !important">
						<input type="digit" v-model='product.attrValue[0].price'
							@change="updateProductAttrValue(product.attrValue[0])" placeholder='请输入售价'>
					</view>
				</view>
			</view>
		</view>

		<view class="" style="height: 150rpx;"></view>
		<view class="btn">
			<view class="" @click="save">确认修改</view>
		</view>
	</view>
</template>

<script>
	import {
		merchantProductDetailsApi,
		saveUpdateProductAttrApi
	} from '@/api/marService.js'
	export default {
		data() {
			return {
				search: {
					product_id: ''
				},
				productAttrkey: [],
				product: {},
				comeType: 0
			}
		},
		onLoad(e) {
			this.comeType = e.searchType
			this.search.product_id = e.product_id
			this.productDetails()
		},
		methods: {
			updateProductAttrValue(attr) {
				attr.is_update = true
				let price = Number(attr.price)
				if (isNaN(price)) {
					attr.is_update = false
					console.log(attr.price)
					this.$set(attr, 'price', 0)
					// attr.price = ''
					uni.showToast({
						title: '请正确输入金额',
						icon: "none"
					})
				} else if (price <= 0) {
					this.$set(attr, 'price', 0)
					attr.is_update = false
					uni.showToast({
						title: '售价必须大于0',
						icon: "none"
					})
				}

			},
			productDetails() {
				merchantProductDetailsApi(this.search).then(res => {
					this.product = res.data
					this.productAttrkey = Object.keys(res.data.attrValue[0].detail)
					console.log(this.productAttrkey)
				}).catch(err => {

				})
			},
			save() {
				let updateAttrs = []
				this.product.attrValue.forEach(attrValue => {
					if (attrValue.is_update) {
						updateAttrs.push(attrValue)
					}
				})
				if (updateAttrs.length == 0) {
					uni.showToast({
						title: '请先先修改价格',
						icon: "none"
					})
					return;
				}
				console.log(updateAttrs)
				saveUpdateProductAttrApi({
					updates: updateAttrs,
					mer_id: this.product.mer_id
				}).then(res => {
					uni.showToast({
						title: '修改成功',
						icon: "none"
					})
					uni.navigateTo({
						url:`/P_service/other/price_manage?comeType=${this.comeType}`
					})
				}).catch(err => {

				})
			}
		}
	}
</script>

<style>
	page {
		padding-top: 30rpx;
	}

	.btn {
		width: 750rpx;
		height: 142rpx;
		background: #FFFFFF;
		border: 1rpx solid #EDEDED;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
		z-index: 10;
	}

	.btn view {
		width: 710rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #29C9A2 0%, #109C7A 100%);
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #FFFEFE;
	}

	.listbg {
		width: 690rpx;
		margin-left: 30rpx;
		border-top: 1rpx solid #DFDFDF;
		border-left: 1rpx solid #DFDFDF;
		margin-top: 30rpx;
	}

	.item {
		display: flex;
	}

	.listbg .item:nth-of-type(1) view {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
	}

	.listbg .item:nth-of-type(odd) {
		background: #f8f8f8;
	}

	.item>view {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 172rpx;
		height: 88rpx;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		border-right: 1rpx solid #DFDFDF;
		border-bottom: 1rpx solid #DFDFDF;
	}

	.item>view>view {
		width: 156rpx;
		height: 68rpx;
		background: #E0EFEB;
		display: flex;
		align-items: center;
	}

	.item>view>view input {
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #109C7A;
	}

	.title {
		width: 690rpx;
		margin-left: 30rpx;
		display: flex;
	}

	.title image {
		width: 180rpx;
		height: 180rpx;
		background: #f5f5f5;
		border-radius: 12rpx;
	}

	.info {
		font-size: 28rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
		line-height: 40rpx;
		width: 480rpx;
		margin-left: 30rpx;
	}

	.info view:nth-of-type(2) {
		font-size: 22rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
		line-height: 40rpx;
	}
</style>
